<template>
  <div style="padding-top: 50px;">
    <el-row>
      <el-col :span="5" :offset="3">
        <div v-loading="loading" style="height: 700px; overflow: auto;">
          <!-- 树形控件 -->
          <el-tree
            :data="treeData"
            node-key="code"
            :props="defaultProps"
            :default-expanded-keys="['affcc9e275ab4ef784637299e21c7ef2']"
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span>
                <el-tooltip class="item" effect="dark" content="新增" placement="top">
                  <vxe-button type="text" @click="() => append(data)">
                    <i class="el-icon-circle-plus" />
                  </vxe-button>
                </el-tooltip>
                <el-tooltip :hidden="data.level === 0" class="item" effect="dark" content="删除" placement="top">
                  <vxe-button type="text" @click="() => remove(node, data)">
                    <i class="el-icon-error" />
                  </vxe-button>
                </el-tooltip>
              </span>
            </span>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="7" :offset="2">
        <el-form ref="form" :rules="rules" :model="form" label-width="160px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="资源名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入资源名称" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="标题" prop="title">
                <el-input v-model="form.title" placeholder="请输入标题" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="资源权限" prop="permission">
                <el-input v-model="form.permission" placeholder="请输入资源权限" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="资源url" prop="url">
                <el-input v-model="form.url" placeholder="请输入资源url" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="资源src" prop="component">
                <el-input v-model="form.component" placeholder="请输入资源src" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="排序" prop="sort">
                <el-input v-model="form.sort" placeholder="请输入排序" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="图标" prop="icon">
                <el-input v-model="form.icon" placeholder="请输入图标" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="重定向">
                <el-input v-model="form.redirect" placeholder="请输入" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="隐藏菜单">
                <el-switch v-model="form.hidden"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="缓存页面">
                <el-switch v-model="form.noCache"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="所属系统" prop="belong">
                <el-select v-model="form.belong" placeholder="请选择所属系统" clearable>
                  <el-option
                    v-for="item in belongList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                    clearable
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item>
                <el-button type="primary" @click="funcSubmit">确 定</el-button>
                <el-button @click="resetForm('form')">重 置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Vue from "vue";
import "xe-utils";
import VXETable from "vxe-table";
import "vxe-table/lib/index.css";
import {
  getResourceTree,
  addResourceTree,
  updateResourceTree,
  delResourceTree
} from "@/api/authorityCreate";
Vue.use(VXETable);
export default {
  name: "AuthorityCreate",
  data() {
    return {
      loading: false,
      emptyForm: {},
      treeData: [],
      mode: "add",
      expandedKeys: [],
      defaultProps: {
        label: "name",
        children: "child"
      },
      belongList: [
        { name: "通用", code: "COMMON" },
        { name: "无车", code: "TMS" },
        { name: "同城", code: "CTMS" },
        { name: "仓储", code: "WMS" }
      ],
      form: {
        parentCode: "",
        level: "",
        code: "",
        name: "",
        title: "",
        permission: "",
        url: "",
        component: "",
        sort: "",
        icon: "",
        belong: "",
        hidden: false,
        noCache: false,
        redirect: ""
      },
      rules: {
        name: [
          { required: true, message: "资源名称不能为空", trigger: "blur" }
        ],
        title: [
          { required: true, message: "标题名称不能为空", trigger: "blur" }
        ],
        permission: [
          { required: true, message: "资源权限不能为空", trigger: "blur" }
        ],
        url: [{ required: false, message: "资源url不能为空", trigger: "blur" }],
        component: [
          { required: false, message: "资源src不能为空", trigger: "blur" }
        ],
        sort: [{ required: true, message: "排序不能为空", trigger: "blur" }],
        icon: [{ required: false, message: "图标不能为空", trigger: "blur" }],
        belong: [
          { required: true, message: "所属系统不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.emptyForm = { ...this.form };
    this.getInfo();
  },
  methods: {
    getInfo() {
      this.treeData = [];
      this.form = this.emptyForm;
      this.loading = true;
      getResourceTree().then(response => {
        this.treeData = response.data;
        this.expandedKeys.push(this.treeData[0].code);
        this.loading = false;
      });
    },
    handleNodeClick(data) {
      this.mode = "update";
      // 对象深拷贝
      this.form = { ...data };
      this.form.noCache = !data.noCache
      if (this.form.child) delete this.form.child;
    },
    append(data) {
      setTimeout(() => {
        const newChild = {
          code: "",
          name: "common",
          ukName: "common",
          belong: "",
          level: data.level + 1,
          parentCode: data.code,
          permission: "",
          sort: "",
          hidden: false,
          noCache: false,
          url: ""
        };
        this.mode = "add";
        this.form = newChild;
      }, 0);
    },
    remove(node, data) {
      setTimeout(() => {
        delResourceTree({ codes: data.code }).then(response => {
          this.$message({ message: response.msg, type: "success" });
          // 无需刷新数据
          this.form = this.emptyForm;
          const parent = node.parent;
          const child = parent.data.child || parent.data;
          const index = child.findIndex(d => d.code === data.code);
          child.splice(index, 1);
        });
      }, 0);
    },
    // 提交
    funcSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          const rLoading = this.openLoading();
          if (this.mode === "update") {
            // 修改接口
            this.form.noCache = !this.form.noCache
            updateResourceTree(this.form).then(response => {
              rLoading.close();
              this.$message({ message: response.msg, type: "success" });
              this.getInfo();
            });
          } else {
            // 新增接口
            addResourceTree(this.form).then(response => {
              rLoading.close();
              this.$message({ message: response.msg, type: "success" });
              this.getInfo();
            });
          }
        } else {
          return false;
        }
      });
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style lang="scss" scoped>
.el-select {
  width: 100%;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
